<template>
  <left-right-structure>
    <radar :radarData="radarData" v-if="radarData" slot="left"></radar>
    <template slot="right">
      <el-select
        class="selector"
        v-model="value"
        placeholder="选择要查看的班级"
        @change="onChange"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <bar-vertical v-if="barData" :barVerticalData="barData"></bar-vertical>
    </template>
  </left-right-structure>
</template>

<script>
import Radar from "@/components/data_analysis/graphs/Radar.vue";
import BarVertical from "@/components/data_analysis/graphs/BarVertical.vue";
import LeftRightStructure from "@/components/LeftRightStructure.vue";
export default {
  components: { Radar, BarVertical, LeftRightStructure },
  name: "ClassPerformEval",
  data() {
    return {
      // TODO:这个数据要走接口请求获得
      /**
       * 格式：
       * [
       * {
       *  value:"",//班级的id
       * label:"",//班级的名字
       *
       * }
       * ]
       */
      options: [],
      value: "",
      radarData: null,
      barData: null,
    };
  },
  methods: {
    onChange() {
      // console.log(this.value);
      this.radarData = null;
      this.barData = null;
      // TODO: 后台需要提供接口以接入
      this.$http
        .get(`${this.$reqPrefix}/getClassSit?pc=${this.value}`)
        .then((res) => {
          this.radarData = res.data.data.radarData;
          this.barData = res.data.data.barData;
        });
    },
  },
  mounted() {
    // TODO:情求所有的班级
    this.$http.get(`${this.$reqPrefix}/getAllClass`).then((res) => {
      this.options = res.data.data;
      this.value = this.options[0].value;
      this.onChange();
    });
  },
};
</script>

<style lang='less' scoped>
.selector {
  width: 160px;
  position: absolute;
  top: 2px;
  right: 4px;
}
</style>